<template>
	<view class="content" :style="{background: 'url('+ bgurl +'/policy/logo_bg.png)  no-repeat center center fixed'}">
		<!-- <image class="login_bg" src="@/static/logo_bg.png" mode="widthFix"></image> -->
		<view class="login_con">
			<!-- #ifdef MP-WEIXIN -->
			<view class="wid" :style="{height: `${statusBarHeight}px`}"></view>
		
			<view class="navbar"  :style="{height: `${titleBarHeight}px`}">
				<view class="left"  :style="{lineHeight: `${titleBarHeight}px` }" @click="goBack">
					<uv-icon name="arrow-left" color="#fff" size="24"></uv-icon> 
				</view> 
			</view>  
				<!-- #endif --> 
			<image class="logo" src="@/static/logo2.png" mode="widthFix" lazy-load></image> 
			<form @submit="formSubmit"  > 
				<view class="inpitem">
					<view class="inpleft">
						<!-- <uv-icon name="account" size="38rpx"></uv-icon> -->
						<input class="uni-input" placeholder-style="color:#DEDEDE" type="number" v-model="tel" name="phone" placeholder="请输入手机号" @input="changeTel"/>
					</view> 
				</view>
				<view class="inpitem">
					<view class="inpleft">
						<!-- <uv-icon name="lock-open" size="38rpx"></uv-icon> -->
						<input class="uni-input"  placeholder-style="color:#DEDEDE" style="width: 260rpx;" name="code" placeholder="请输入验证码" />
					</view>
					<uv-code
						class="codetxt"
						ref="uCode2"
						@change="codeChange2"
						keep-running
						start-text="获取验证码"
					></uv-code>
					<text
							@tap="getCode2"
							:text="tips2"
							class="uv-page__code-text"
					>{{tips2}}</text>
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
				<button class="loginbtn" form-type="submit">登录</button> 
				<view class="tips" @click="checkboxChange">
					<uv-icon v-if="!selfChecked" name="checkmark-circle" color="#8B8E8C" size="14"></uv-icon>
					<uv-icon  v-else name="checkmark-circle-fill" color="#FFBF00" size="14"></uv-icon>
					<view class="ml10">登录即代表同意</view> 
					<view class="pro" @tap="userxy">《用户协议》</view> 
					<view class="pro" @tap="privacy">《隐私协议》</view>
				</view>
				<!-- #endif --> 
				
				<!-- #ifdef H5 -->
				<button class="loginbtn" form-type="submit">完成</button> 
				<view class="bind_tip">提示：为了更好地为您提供服务，并确保账号的安全统一，强烈建议您在各端使用统一的手机号。</view>	
				<!-- #endif -->  
				
				
			<!-- 	<checkbox-group class="tips"  @change="checkboxChange">	
					<label class="label">
						<checkbox :checked="selfChecked" value="agreen" style="transform: scale(0.8,0.8);"/>  
					</label> 
					
				</checkbox-group> -->
				
			</form>
		</view>
	</view>
</template>

<script>
	import { wxUrls } from '@/utils/api.js'
	import request from '@/utils/request.js'
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {  mapActions } from 'vuex'
	import config from '@/config.js'
	import badgeMix from '@/common/mixins.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				titleBarHeight:this.titleBarHeight,
				statusBarHeight:this.statusBarHeight,
				allBarHeight:this.allBarHeight, 
				tips2:'',
				selfChecked: false,
				tel:'',
				bgurl:config.imageUrl
			}
		},
		onLoad(){
			// this.menuButton()
		},
		methods: {  
			...mapActions(['PhoneLogin','getOpenId','openId','bindPhone']),    
			checkboxChange(e){
				this.selfChecked = !this.selfChecked
			},
			codeChange2(text) { 
				this.tips2 = text; 
			},
			changeTel(e){
				// console.log(e)
				this.tel = e.detail.value.replace(/[, ]/g,'')
			},
			// 获取验证码
			getCode2() {
				var that = this;
				if(!that.tel){
					return toast('手机号不能为空！')
				}  ///^1[3456789]\d{9}$/
				if(!(/^1(2|3|4|5|6|7|8|9)\d{9}$/.test(that.tel.replace(/[, ]/g,'')))){
					return toast('请输入正确的手机号！');
				}
				if (that.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					uni.request({
						url: `${request.BASE_API}/member/sendSms`, //仅为示例，并非真实接口地址。
						data: {
							phone: that.tel, 
						},
						method:'POST',
						success: function(res) {
							if(res.code='200'){
								setTimeout(() => {
									uni.hideLoading(); 
									toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									that.$refs.uCode2.start();
								}, 1000);
							}else{
								toast('请稍后再试!');
							}
						}, 
					});
					
				} else {
					toast('倒计时结束后再发送');
				}
			},
			// 登录
			async formSubmit(e) { 
				console.log(this.selfChecked);
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				const phone = e.detail.value.phone.replace(/[, ]/g,'');
				const code = e.detail.value.code.replace(/[, ]/g,'');   
				if(!phone){
					return toast('请输入手机号！');
				} 
				if(!(/^1(2|3|4|5|6|7|8|9)\d{9}$/.test(phone))){
					return toast('请输入正确的手机号！');
				}
				if(!code){
					return toast('请输入验证码！');
				} 
				// #ifdef MP-WEIXIN
				if(!this.selfChecked){
					return toast('请先同意隐私协议！');
				}
				// #endif
				// #ifdef MP-WEIXIN
				const res = await uni.login() 
				await this.PhoneLogin({"phone":phone,"smsCode":code,"source": "WeChatMini","code": res.code}) 
				// await this.getOpenId()    
				// #endif
				
				// #ifdef H5
				// 公众号绑定手机号
				await this.bindPhone({"openId":uni.getStorageSync('OPENID'),"phone":phone,"smsCode":code})  
				// #endif 
			},
			// 用户协议
			userxy(){ 
				// uni.navigateTo({
				// 	url:'/pages/webview/policyUser'
				// })
				const info = config.appInfo.agreements[1]
				uni.navigateTo({
					url:'/pages/webview/content?info='+ encodeURIComponent(JSON.stringify(info))
				}) 
			}, 
			// 隐私政策
			privacy(){
				// uni.navigateTo({
				// 	url:'/pages/webview/policy'
				// })
				const info = config.appInfo.agreements[0]
				uni.navigateTo({
					url:'/pages/webview/content?info='+ encodeURIComponent(JSON.stringify(info))
				}) 
			},
			// 小程序登录
			async getPhoneNumber(e) {
				console.log(e,"手机号登录");
				const res = await uni.login()
				// code = res.code
				console.log(res);
			},
			goBack(){
				uni.navigateBack( )
			}, 
		}
	}
</script>

<style  lang="scss"> 
	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		width: 100vw;
		height: 100vh;
		background: url('https://test.spadj.com/policy/logo_bg.png')  no-repeat center center fixed ;
		background-size: cover;
		box-sizing: border-box; 
		.login_bg{
			position: absolute;
			width: 100%;
			// height: 100vh !important;
			top: 0;
			z-index: -1;
		}
		.login_con{
			width: 674rpx;
			margin: 0 auto; 
		}
		.other_login{
			position: fixed;
			bottom: 100rpx;
			width:600rpx ;
			font-size: 28rpx;
			color: #fff; 
			.other_tit{
				margin-bottom: 36rpx;
			}
			.tel_icon{
				width:80rpx ;
				height: 80rpx;
				margin-bottom: 10rpx;
				background-color: #fff;
				border-radius: 50%;
				opacity: 0.6;
				text-align: center;
				line-height: 80rpx;
				image{
					width: 36rpx;
					height: 54rpx;
					margin: 13rpx 0;
				}
			}
		}
	}
	.navbar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 690rpx;
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		.left{ 
			height: 40rpx; 
			margin: 32rpx 32rpx 32rpx 0; 
			font-size: 22rpx; 
		}  
	}
	.logo { 
		width: 208rpx;
		height: 196rpx !important; 
		margin: 0 233rpx;
		margin-top: 150rpx; 
		margin-bottom: 94rpx; 
	}
	.inpitem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 550rpx;
		padding: 30rpx 30rpx 32rpx 30rpx; 
		margin: 0 auto;
		 border-bottom: 1rpx solid #E9E9E9;
		.inpleft{
			display: flex;
			justify-content: flex-start;
			align-items: center; 
			.uni-input{
				font-size: 28rpx;
				margin-left: 10rpx;
				color: #fff;
			}
		}
		.codetxt,.uv-page__code-text{
			margin-right: 20rpx;
			font-size: 28rpx;
			color: #FFBF00;
		}
	}
	.loginbtn{
		width:520rpx;
		height: 88rpx;  
		margin: 0 auto;
		margin-top: 56rpx;
		margin-bottom: 24rpx;
		background: #fff;
		border-radius: 45rpx;
		font-size: 30rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #2F1500;
		line-height: 88rpx;
		border: none;
		opacity: 0.6;
	}
	.bind_tip{
		width: 500rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		line-height: 30rpx;
		opacity: .8;
	}
	.tips{ 
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 100%; 
		margin: 0 auto;
		margin-top: 18rpx;
		font-size: 26rpx;  
		color: #fff;  
		.pro{
			color:#FFBF00;
		}
		
	}
	.uv-input{
		border: none;
	}
</style>
